import React, { Component } from 'react';
import { nanoid } from 'nanoid';
import PropType from 'prop-types';
import './index.css';
export default class Header extends Component {
  // 对props进行：类型、必要性的限制
  static propTypes = {
    addTodo: PropType.func.isRequired,
  };
  // 添加一个todo回调
  addTodo = (event) => {
    // 解构赋值
    const { keyCode, target } = event;
    // 判断是否按下回车键
    if (keyCode !== 13) return;
    // 判断输入内容是否为空
    if (target.value.trim() === '') {
      alert('输入内容不能为空！');
      return;
    }
    // 加工数据
    const todoObj = {
      id: nanoid(),
      name: target.value,
      done: false,
    };
    // 调用父组件传递过来的自定义方法，并传递参数，用于父组件更新数据App
    this.props.addTodo(todoObj);
    // 清空输入框
    target.value = '';
  };
  render() {
    return (
      <div className='header'>
        <input
          type='text'
          onKeyUp={this.addTodo}
          placeholder='请输入你的任务名称，按回车键确认'
        />
      </div>
    );
  }
}
